<template>
  <div class='container'>
    <el-card style="margin:20px">
      <!-- 头部 -->
      <el-row>
        <el-col :span="22">
          <el-form :inline="true" :model="form">
            <el-form-item label="关键字" prop="keyword">
              <el-input size="small" v-model="form.keyword"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select  placeholder="请选择" size="small" v-model="form.state">
                <el-option label="已启用" value="1" ></el-option>
                <el-option label="已禁用" value="0" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="clearHeaderForm">清除</el-button>
              <el-button type="primary" size="small" @click="searchArticle">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="success" class="el-icon-edit" size="small" @click="addArticle">新增技巧</el-button>
        </el-col>
      </el-row>
      <!-- 提示信息 -->
      <el-alert type="info" show-icon :closable="false">数据一共{{total}}条</el-alert>
       <el-table stripe style="width: 100%" :data="tableList">
        <el-table-column label="序号" width="60" type="index" :index="indexMethod"></el-table-column>
        <el-table-column label="文章标题" width="400" prop="title">
          <template #default='{row}'>
            <span>{{row.title}}</span>
            <i class="el-icon-film" v-if="row.videoURL" @click="showVideo(row.videoURL)"></i>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" width="100" prop="visits"></el-table-column>
        <el-table-column label="录入人" width="100" prop="username"></el-table-column>
        <el-table-column label="录入时间" width="180" prop="createTime">
          <template #default='{row}'>
            {{row.createTime |formatDate}}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" prop="state">
          <template #default='{row}'>
            {{row.state ? '已启用':'已禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default='{row}'>
           <el-link type="primary" class="handle"  :underline="false" @click="perviewArticle(row)">预览</el-link>
           <el-link type="primary" class="handle"  :underline="false" @click="forbidden(row)">禁用</el-link>
           <el-link type="primary" class="handle"  :underline="false" :disabled='!!row.state' :class="{forbidden:!!row.state}" @click="editArticle(row)">修改</el-link>
           <el-link type="primary" class="handle"  :underline="false" :disabled='!!row.state' :class="{forbidden:!!row.state}" @click="delArticle(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="float:right;margin:20px"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10">
      </el-pagination>
    </el-card>
      <!-- 播放器 -->
    <div :class="{videoDiv:video}" style='display:none'>
      <span class="quitVideo" @click="quitVideo">x</span>
      <video class="video" :src="videoSrc" controls autoplay loop >
      <meta name="referrer" content="never">
      </video>
    </div>
    <!-- 预览文章对话框 -->
    <articles-preview :previewDialogVisible.sync='previewDialogVisible' :articleId='articleId'></articles-preview>
    <!-- 新增文章输入框 -->
    <articles-add :addDialogVisible.sync='addDialogVisible' @updateArticles='getList' :editData='editData'></articles-add>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles.js'

import articlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  name: 'Article',
  components: { articlesPreview, ArticlesAdd },
  data () {
    return {
      list: {
        page: 1,
        pagesize: 10
      }, // 请求表格数据
      tableList: [], // 表格数据
      form: { // 表头表单
        keyword: '',
        state: ''
      },
      total: 0,
      videoSrc: '',
      video: false,
      previewDialogVisible: false, // 预览文章对话框
      articleId: '',
      addDialogVisible: false, // 添加文章对话框
      editData: {} // 修改文章标识符

    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 初始化数据
    async getList () {
      const { data } = await list(this.list)
      this.tableList = data.items
      this.total = data.counts
    },
    // 分页功能size改变
    handleSizeChange (newVal) {
      this.list.pagesize = newVal
      this.getList()
    },
    // 分页功能page改变
    handleCurrentChange (newVal) {
      this.list.page = newVal
      this.getList()
    },
    // 视频播放
    showVideo (url) {
      this.videoSrc = url
      this.video = true
    },
    // 退出视频播放
    quitVideo () {
      this.videoSrc = ''
      this.video = false
    },
    // 清空表头表单
    clearHeaderForm () {
      this.form = {
        keyword: '',
        state: ''
      }
    },
    // 预览文章
    perviewArticle (data) {
      this.previewDialogVisible = true
      this.articleId = data
    },
    // 禁用按钮
    async forbidden (row) {
      row.state = row.state === 0 ? 1 : 0
      await changeState(row)
      this.getList()
    },
    // 添加文章
    addArticle () {
      this.addDialogVisible = true
      this.editData = {}
    },
    // 表头搜索按钮
    searchArticle () {
      if (this.form.state === '') {
        this.list.keyword = this.form.keyword
      } else {
        this.list = this.form
      }
      this.getList()
      this.list = {
        page: 1,
        pagesize: 10
      }
    },
    // 设置序号
    indexMethod (index) {
      return index + 1 + this.list.pagesize * (this.list.page - 1)
    },
    // 修改文章
    editArticle (data) {
      this.addDialogVisible = true
      this.editData = data
    },
    // 删除文章
    async delArticle (row) {
      const res = await this.$confirm('此操作将永久删除此文章吗, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (res === 'confirm') {
        const res = await remove(row)
        if (res.status === 200) this.$message.success('删除文章成功')
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.handle{
  padding: 0 5px;
}
.el-icon-film{
  color: blue;
  cursor: pointer;
}
.forbidden{
  color:grey !important;
}
.videoDiv{
  display: block !important;
  background-color: rgba(0,0,0,.3);
  position: fixed;
  top: 0;
  bottom:0;
  right: 0;
  left: 0;
  z-index: 100004;
  .video{
    width: 700px;
    height: 400px;
    position: absolute;
    z-index: 100005;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .quitVideo{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 30px;
    border-radius: 50px;
    background-color: rgba(0,0,0,.5);
    color: rgba(255,255,255,.5);
    line-height: 50px;
    text-align: center;
    cursor: pointer;
  }
}

</style>
